<template>
  <div class="login-container">
    <el-form v-cloak ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">用户登录</h3>
      </div>
      <el-form-item prop="name" :show-message="false">
        <label class="field-label" for="name">姓名</label>
        <el-input v-model="loginForm.name" name="name" type="text" auto-complete="on" placeholder="请输入姓名" />
      </el-form-item>

      <el-form-item prop="idCard" :show-message="false">
        <label class="field-label" for="idCard">身份证</label>
        <el-input v-model="loginForm.idCard" type="text" auto-complete="on" placeholder="请输入身份证" />
      </el-form-item>
      <el-form-item prop="phone" :show-message="false">
        <label class="field-label" for="phone">手机号</label>
        <el-input v-model="loginForm.phone" name="phone" type="text" auto-complete="on" placeholder="请输入手机号" />
      </el-form-item>
      <el-form-item prop="code" :show-message="false">
        <label class="field-label" for="code">验证码</label>
        <el-input v-model="loginForm.code" class="login-code" auto-complete="off" name="code" placeholder="验证码" />
        <div class="get-code">
          <div class="count-down">
            <el-button type="text" :disabled="disabled" @click="handleClick">
              {{ text }}
            </el-button>
          </div>
        </div>
      </el-form-item>
      <el-button size="medium" class="login-btn" :loading="loading" type="primary" @click.native.prevent="handleLogin">登录</el-button>
    </el-form>

    <!--    <div class="copyright">-->
    <!--      Copyright © 2022 xxx.com 版权所有 <a href="https://github.com/linlinjava/litemall">沪ICP备xxx号</a>-->
    <!--    </div>-->
  </div>
</template>

<script>
import { getSendCode } from '@/api/login'
import { validateIdCard, validatePhone } from '@/utils/validate'

export default {
  name: 'Login',
  data() {
    return {
      activeName: '',
      activeIdCard: '',
      activePhone: '',
      activeCode: '',
      loginForm: {
        name: '',
        // name: '邱梓煜',
        // name: '杨军珍',
        idCard: '',
        // idCard: '522725202112170018',
        // idCard: '522723196504060263',
        phone: '',
        // phone: '18785402051',
        // phone: '18085404744',
        code: ''
      },
      status: false,
      text: '获取验证码',
      disabled: false,
      loading: false,
      loginRules: {
        name: [{ required: true, message: '请输入正确的用户名', trigger: 'blur' }],
        idCard: [{ required: true, message: '请输入正确的证件号码', trigger: 'blur' },
          { validator: (rule, value, callback) => {
            validateIdCard(rule, value, callback)
          } }],
        phone: [
          { required: true, message: '请输入正确的手机号码', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              validatePhone(rule, value, callback)
            }
          }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }

  },
  created() {
    // window.addEventListener('hashchange', this.afterQRScan)
  },
  methods: {
    /**
     * 登陆
     */
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid && !this.loading) {
          this.loading = true
          this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(error => {
            this.$notify.error({
              title: '失败',
              message: error.msg
            })
            this.loading = false
          })
        } else {
          this.$message.warning('信息输入有误，请重新输入!')
          return false
        }
      })
    },
    handleClick() {
      this.$refs.loginForm.validateField('name')
      this.$refs.loginForm.validateField('phone')
      this.$refs.loginForm.validateField('idCard')
      const isName = this.loginForm.name !== ''
      const isPhone = this.validatePhone(this.loginForm.phone)
      const isIdCard = this.validateIdCard(this.loginForm.idCard)
      if (isName && isPhone && isIdCard) {
        this.status = true
        getSendCode({
          phone: this.loginForm.phone
        }).then(() => {
          this.$message.success('验证码已发送')
          this.countDown()
        })
      } else {
        this.$message.warning('信息输入有误，请重新输入!')
      }
    },
    countDown() {
      if (typeof this.text === 'string') {
        this.disabled = true
        this.text = 60
      }

      const fn = setInterval(() => {
        if (this.text === 0) {
          clearInterval(fn)
          this.text = '重新发送'
          this.disabled = false
          return
        }
        this.text--
      }, 1000)

      this.status = false
    },

    /**
     * 检验手机号
     * @param value
     */
    validatePhone(value) {
      const reg = new RegExp(
        '^(13[0-9]|14[01456879]|15[0-3,5-9]|16[2567]|17[0-8]|18[0-9]|19[0-3,5-9])\\d{8}$'
      )
      if (value) {
        if (!reg.test(value)) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    },

    /**
     * 验证身份证号码
     * @param value
     */
    validateIdCard(value) {
      const reg = new RegExp(
        '(^[1-9]\\d{5}(18|19|([23]\\d))\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$)|(^[1-9]\\d{5}\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}$)'
      )
      if (value) {
        if (!reg.test(value)) {
          return false
        } else {
          return true
        }
      } else {
        return false
      }
    }
  }
}
</script>

<style lang="scss">
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$cursor: #B9B9B9;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-form-item {
    border: 1px solid #D8D8D8;
    border-radius: 5px;
    color: #3B3434;
  }
  .el-form-item__content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: nowrap;
  }
  .el-input {
    display: inline-block;
    height: 42px;
    width: calc(100% - 75px);

    input {
      height: 40px;
      border: none;
      background: transparent;
      -webkit-appearance: none;
      color: #333;
      caret-color: $cursor;
      font-size: 14px;

      &:-webkit-autofill {
        -webkit-text-fill-color: #333 !important;
        transition: background-color 5000s ease-in-out 0s;
      }
    }
  }
  .is-error {
    border-color: red;
  }
}
</style>

<style lang="scss" scoped>
.login-container {
  display: flex;
  // 容器主轴方向
  flex-direction: row;
  // 主轴对齐方式
  justify-content: center;
  // 交叉轴的对齐方式
  align-items: center;
  width: 100%;
  min-height: 100%;
  background: url("~@/assets/login/login_bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .title-container {
    .title {
      padding:20px 0;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      color: #3C3E47;
    }
  }
  .login-form {
    width: 345px;
    height: 415px;
    padding:14px 25px 0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0px 10px 20px 1px rgba(0,122,170,0.77);
    overflow: hidden;
  }
  .login-code{
    width: 110px;

  }
  .get-code {
    flex-grow: 1;
    margin:7px 0;
    text-align: center;
    border-left: 1px solid #ccc;
  }

  .field-label {
    display: inline-block;
    width: 75px;
    padding:6px 0 5px 10px;
    vertical-align: middle;
    font-size: 14px;
    color: #3B3434;
    font-weight: normal;
  }
  .count-down {
    .ivu-btn {
      width: 100%;
    }
  }
  .login-btn{
    width: 100%;
  }

  .copyright {
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 20px;
    letter-spacing: 0.6px;
    a {
      font-weight: bold;
      border-bottom: 1px solid #fff;
    }
  }
}
</style>

